<div>
  <div class="container club">
    <div class="col-sm-9">
      <div class="panel panel-default">
        <div class="panel-body club-topic-list">
          <div class="media item" v-for="item in list">
            <div class="media-body">
              <h4 class="media-heading title"><a target="_blank" href="/public/repos/{{item._id}}/_book">{{ item.name }}</a></h4>
              <div class="info">
                <a class="user-name">{{ item.cloneUrl }}</a> •
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="list-group">
        <a href="#" class="list-group-item disabled">
          帮助
        </a>
        <a href="/static/edit_help/show?appId=<%=appId%>" class="list-group-item" target="_link">如何编辑文章？</a>
        <a href="/wiki?zoneId=58a008bb1b855701004e8e1c&appId=<%=appId%>" class="list-group-item">日语知识库</a>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    var appId = $('[name=app-id]').val();
    var pagePrefix = '<%= apiPrefix.page %>';
    var dataPrefix = '<%= apiPrefix.data %>';
    var vue = new Vue({
      el: '#app',
      data: {
        list: [],
        currentPage: 1,
        canLoadData: true,
        pages: 1,
        errorMsg: '',
        successMsg: ''
      },
      methods: {
        fetchList: function(currentPage) {
          $.post( dataPrefix + '/repo/list',
            {
              appId: appId,
              currentPage: currentPage
            },
            function(result) {
              canLoadData = true;

              if (result.err) {
                vue.errorMsg = result.err;
                return;
              }

              result.data.forEach(function(item) {
                vue.list.push(item);
              });

              vue.currentPage = currentPage;
              vue.pages = result.pages;
          });
        }
      }
    });

    var scrollButtom = new ScrollButtom();
    scrollButtom.init(function() {
      if (vue.currentPage < vue.pages && vue.canLoadData) {
        vue.canLoadData = false;
        vue.fetchList(vue.currentPage + 1);
      }
    });

    vue.fetchList();
  });
</script>
